<template>
  <div id="app">
    <ul class="titlebox">
      <li
        v-for="(item, index) in title"
        :key="index"
        @click="activeindex = index"
        :class="{ active: activeindex == index }"
      >
        {{ item.name }}
        <div class="title_center" v-show="activeindex == index">
          <div
            class="soncenter"
            v-for="(sonitem, sonindex) in item.products"
            :key="sonindex"
          >
            {{ sonitem.name }}---{{ sonitem.price }}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      activeindex: 0,
      title: [
        {
          id: 1,
          name: "数码",
          products: [
            {
              id: 1,
              name: "Macbook Pro 2022",
              price: 998,
            },
            {
              id: 2,
              name: "iphone 14 Pro Mini",
              price: 588,
            },
            {
              id: 3,
              name: "ipod",
              price: 8,
            },
          ],
        },
        {
          id: 2,
          name: "服饰",
          products: [
            {
              id: 4,
              name: "精神小伙爆款旺仔牛奶全身套",
              price: 99,
            },
            {
              id: 5,
              name: "潮牌豆豆鞋",
              price: 59,
            },
            {
              id: 6,
              name: "牌牌琦电动车",
              price: 1999,
            },
          ],
        },
        {
          id: 3,
          name: "其他",
          products: [
            {
              id: 7,
              name: "一罐空气",
              price: 0.5,
            },
            {
              id: 8,
              name: "老头环",
              price: 298,
            },
            {
              id: 9,
              name: "猫抓板",
              price: 10,
            },
          ],
        },
      ],
    };
  },
  methods: {
    add() {},
  },
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.nan {
  width: 300px;
  height: 300px;
  background-color: skyblue;
}
.nv {
  width: 300px;
  height: 300px;
  background-color: pink;
}
.titlebox li {
  width: 300px;
  height: 50px;
  list-style: none;
  display: link-block;
  float: left;
  border: 1px solid #000;
  line-height: 50px;
}
.soncenter {
  width: 100%;
  height: 50px;
  background-color: pink;
}
.active {
  background-color: skyblue;
}
</style>
